<template>
    <el-dialog v-model="dataForm.visible" title="粘贴至" :before-close="dataForm.handle.close" :close-on-click-modal="false" destroy-on-close draggable top="25vh" width="28%">
        <el-scrollbar v-loading="dataForm.loading" style="height: 35vh;overflow-y: auto">
            <el-tree ref="treeRef"
                     :filter-node-method="dataForm.handle.filterNodeHandle"
                     :load="dataForm.handle.autoLoadHandle"
                     :props="dataForm.data.props"
                     accordion
                     highlight-current
                     lazy
                     node-key="path">
                <template #default="{ node, data }">
                    <el-image :src="fileIcon('folder')" style="position: relative;float: left; width: 1.3em;height: 1.3em;"/>&nbsp;{{ node.label }}
                </template>
            </el-tree>
        </el-scrollbar>
        <el-footer style="display:flex; justify-content: end; padding: 16px 0 0">
            <el-button @click="dataForm.handle.close()">取消</el-button>
            <el-button type="primary" @click="dataForm.handle.submit()">粘贴</el-button>
        </el-footer>
    </el-dialog>
</template>

<script>
import {defineComponent, ref, nextTick, reactive, getCurrentInstance} from "vue";
import {service, fileIcon} from '@/utils'

export default defineComponent({
    props: {
        refresh: {
            type: Function
        }
    },
    setup(props, {emit}) {
        const {proxy} = getCurrentInstance();
        const treeRef = ref();
        const dataForm = reactive({
            visible: false,
            loading: false,
            data: {
                uid: null,
                operate: null,
                selections: [],
                props: {
                    label: 'name',
                    isLeaf: 'leaf'
                }
            },
            handle: {
                close: () => {
                    dataForm.loading = false;
                    dataForm.visible = false;
                },
                submit: (node = treeRef.value.getCurrentNode()) => {
                    dataForm.loading = true;
                    if (dataForm.data.operate === 'copy') {
                        service.post(`/hadoop/copy/${dataForm.data.uid}`, {path: dataForm.data.selections, dest: node.path}).then(({code}) => {
                            if (code === 200) {
                                dataForm.visible = false;
                                props.refresh();
                            }
                        }).finally(() => dataForm.loading = false)
                    } else {
                        service.post(`/hadoop/move/${dataForm.data.uid}`, {path: dataForm.data.selections, dest: node.path}).then(({code}) => {
                            if (code === 200) {
                                dataForm.visible = false;
                                props.refresh();
                            }
                        }).finally(() => dataForm.loading = false)
                    }
                },
                filterNodeHandle: (value, data) => {
                    if (!value) return true
                    return data.label.includes(value)
                },
                // 懒加载数据
                autoLoadHandle: ({level, data}, resolve) => {
                    if (level === 0) {
                        dataForm.loading = true;
                    }
                    service.get(`/hadoop/list/${dataForm.data.uid}`, {path: level === 0 ? "/" : data.path, status: 'DIRECTORY'}).then(({code, data}) => {
                        data = data.rows.filter(item => !dataForm.data.selections.includes(item.path));
                        return resolve(code === 200 ? data : [])
                    }).finally(() => {
                        if (level === 0) {
                            dataForm.loading = false
                        }
                    })
                }
            }
        });

        // 展示弹窗
        const show = (rows, operate, uid) => {
            if (rows) {
                let dirs = rows.filter(item => item.directory);
                if (dirs.length > 0 && operate === 'copy') {
                    proxy.$message.error('不支持复制目录');
                } else {
                    dataForm.data.uid = uid;
                    dataForm.visible = true;
                    nextTick(() => {
                        dataForm.data.operate = operate;
                        dataForm.data.selections = rows.map(item => item.path);
                    });
                }
            }
        };

        return {
            treeRef, dataForm, show, fileIcon
        };
    }
});
</script>